import { ref, onMounted, onUnmounted, Ref } from "vue";

const useClickOutside = (elementRef:Ref<null | HTMLElement>) =>{
    const isClickOutside = ref(false)
    //e是点击事件设置为MouseEvent
    const handler = (e:MouseEvent) =>{
        if(elementRef.value){
            if(elementRef.value.contains(e.target as HTMLElement)){
                isClickOutside.value = false;
            }else{
                isClickOutside.value = true;
            }
        }
    }
    onMounted(()=>{
        document.addEventListener('click',handler)
    })
    onUnmounted(()=>{
        document.removeEventListener('click',handler)
    })
    return isClickOutside
}

export default useClickOutside